<template>
  <div id="app">
    <Row style="height:100%;">
      <Col span="3" style="border-right: 1px solid  red;height:100%;overflow: auto;">
        <div v-for="item in routes" style="padding:10px;">
          <router-link :to="item.path">
            {{item.name}}
          </router-link>
        </div>
      </Col>
      <Col span="21" style="padding:10px;">
        <router-view/>
      </Col>

    </Row>

  </div>
</template>

<script>
  import {routes} from '@/router'

  export default {
    name: "App",

    mounted() {
      console.log(this.$data);
    },
    computed: {
      routes() {
        return routes
      }
    }
  };
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  html, body, #app {
    height: 100%;
  }

</style>
